import React, { PropsWithChildren, useMemo } from 'react';
import {
  createTheme,
  MantineColorsTuple,
  MantineProvider as BaseMantineProvider,
  MantineThemeColors,
} from '@mantine/core';
import config from './config';

const MantineProvider = ({
  colors: c,
  ...props
}: PropsWithChildren<{
  colors?: Record<string, string[]>;
}>) => {
  const theme = useMemo(() => {
    const r = ['', '', '', '', '', '', '', '', '', ''] as const;
    const colors = Object.keys(c || {}).reduce((o, key) => {
      const val = c?.[key] || [];
      o[key] = [...val, ...r.slice(val.length)] as unknown as MantineColorsTuple;
      return o;
    }, {} as MantineThemeColors);
    return createTheme({
      ...config,
      colors,
    });
  }, [c]);
  return <BaseMantineProvider {...props} theme={theme} />;
};
export default MantineProvider;
